<div class="content__title">
    <h1>
        Form Elements
        <small>Native support</small>
    </h1>
</div>
<div nz-row [nzGutter]="16">
    <div nz-col [nzMd]="24">
        <nz-card>
            <ng-template #title>Inline Form</ng-template>
            <ng-template #body>
                <form nz-form [nzLayout]="'inline'">
                    <div nz-form-item>
                        <div nz-form-control>
                            <nz-input [nzPlaceHolder]="'username'">
                                <ng-template #prefix><i class="anticon anticon-user"></i></ng-template>
                            </nz-input>
                        </div>
                    </div>
                    <div nz-form-item>
                        <div nz-form-control>
                            <nz-input [nzType]="'password'" [nzPlaceHolder]="'Password'">
                                <ng-template #prefix><i class="anticon anticon-lock"></i></ng-template>
                            </nz-input>
                        </div>
                    </div>
                    <div nz-form-item>
                        <div nz-form-control>
                            <label nz-checkbox>
                                <span>Remember me</span>
                            </label>
                        </div>
                    </div>
                    <div nz-form-item>
                        <div nz-form-control>
                            <button nz-button [nzType]="'primary'">Login</button>
                            <button nz-button>Register</button>
                        </div>
                    </div>
                </form>
            </ng-template>
        </nz-card>
    </div>
</div>
<div nz-row [nzGutter]="16">
    <div nz-col [nzMd]="12">
        <nz-card>
            <ng-template #title>Horizontal Form</ng-template>
            <ng-template #body>
                <form nz-form>
                    <div nz-form-item nz-row>
                        <div nz-form-label nz-col [nzSm]="6" [nzXs]="24">
                            <label for="h-username" nz-form-item-required>Username</label>
                        </div>
                        <div nz-form-control nz-col [nzSm]="14" [nzXs]="24">
                            <nz-input [nzId]="'h-username'" [nzPlaceHolder]="'username'">
                                <ng-template #prefix><i class="anticon anticon-user"></i></ng-template>
                            </nz-input>
                        </div>
                    </div>
                    <div nz-form-item nz-row>
                        <div nz-form-label nz-col [nzSm]="6" [nzXs]="24">
                            <label for="h-password" nz-form-item-required>Password</label>
                        </div>
                        <div nz-form-control nz-col [nzSm]="14" [nzXs]="24">
                            <nz-input [nzId]="'h-password'" [nzType]="'password'" [nzPlaceHolder]="'Password'">
                                <ng-template #prefix><i class="anticon anticon-lock"></i></ng-template>
                            </nz-input>
                        </div>
                    </div>
                    <div nz-form-item nz-row>
                        <div nz-form-control nz-col [nzSpan]="14" [nzXs]="24" [nzOffset]="6">
                            <label nz-checkbox>
                                <span>Remember me</span>
                            </label>
                        </div>
                    </div>
                    <div nz-form-item nz-row class="mb0">
                        <div nz-form-control nz-col [nzSpan]="14" [nzXs]="24" [nzOffset]="6">
                            <button nz-button [nzType]="'primary'">Login</button>
                            <button nz-button>Register</button>
                        </div>
                    </div>
                </form>
            </ng-template>
        </nz-card>
    </div>
    <div nz-col [nzMd]="12">
        <nz-card>
            <ng-template #title>Vertical Form</ng-template>
            <ng-template #body>
                <form nz-form>
                    <div nz-form-item nz-row>
                        <div nz-form-label>
                            <label for="v-username" nz-form-item-required>Username</label>
                        </div>
                        <div nz-form-control>
                            <nz-input [nzId]="'v-username'" [nzPlaceHolder]="'username'">
                                <ng-template #prefix><i class="anticon anticon-user"></i></ng-template>
                            </nz-input>
                        </div>
                    </div>
                    <div nz-form-item nz-row>
                        <div nz-form-label>
                            <label for="v-password" nz-form-item-required>Password</label>
                        </div>
                        <div nz-form-control>
                            <nz-input [nzId]="'v-password'" [nzType]="'password'" [nzPlaceHolder]="'Password'">
                                <ng-template #prefix><i class="anticon anticon-lock"></i></ng-template>
                            </nz-input>
                        </div>
                    </div>
                    <div nz-form-item nz-row>
                        <div nz-form-control>
                            <label nz-checkbox>
                                <span>Remember me</span>
                            </label>
                        </div>
                    </div>
                    <div nz-form-item nz-row class="mb0">
                        <div nz-form-control>
                            <button nz-button [nzType]="'primary'">Login</button>
                            <button nz-button>Register</button>
                        </div>
                    </div>
                </form>
            </ng-template>
        </nz-card>
    </div>
</div>
<div nz-row [nzGutter]="16" class="d-none">
    <div nz-col [nzMd]="24">
        <nz-card>
            <ng-template #title>Search Form</ng-template>
            <ng-template #body>
                <form nz-form>
                    <div nz-row [nzGutter]="32">
                        <div nz-col [nzSpan]="8" *ngFor="let item of searchFields" [class.d-none]="!item.showed">
                            <div nz-form-item nz-row>
                                <div nz-form-label nz-col [nzSpan]="5">
                                    <label [attr.for]="'field' + item.index">Field {{item.index}}</label>
                                </div>
                                <div nz-form-control nz-col [nzSpan]="19">
                                    <nz-input [nzPlaceHolder]="'placeholder'"></nz-input>
                                </div>
                            </div>
                        </div>
                    </div>
                    <div nz-row>
                        <div nz-col [nzSpan]="24" class="text-right">
                            <button nz-button [nzType]="'primary'">Search</button>
                            <button nz-button>Clear</button>
                            <a class="pl-sm" (click)="toggleSearchCollapse()">
                                Collapse
                                <i class="anticon" [class.anticon-down]="searchCollapsed" [class.anticon-up]="!searchCollapsed"></i>
                            </a>
                        </div>
                    </div>
                </form>
            </ng-template>
        </nz-card>
    </div>
</div>
<div nz-row [nzGutter]="16">
    <div nz-col [nzMd]="24">
        <nz-card>
            <ng-template #title>Form elements</ng-template>
            <ng-template #body>
                <form nz-form>
                    <div nz-form-item nz-row>
                        <div nz-form-label nz-col [nzSm]="4">
                            <label>
                                Plain Text
                                <nz-tooltip [nzTitle]="'What do you want other to call you'">
                                  <i nz-tooltip class="anticon anticon-question-circle-o"></i>
                                </nz-tooltip>
                            </label>
                        </div>
                        <div nz-form-control nz-col [nzSm]="20">
                            <span nz-form-text>China</span>
                        </div>
                    </div>
                    <div nz-form-item nz-row>
                        <div nz-form-label nz-col [nzSm]="4">
                            <label>Normal Text</label>
                        </div>
                        <div nz-form-control nz-col [nzSm]="20">
                            <nz-input></nz-input>
                        </div>
                    </div>
                    <div nz-form-item nz-row>
                        <div nz-form-label nz-col [nzSm]="4">
                            <label for="label-focus">Label focus</label>
                        </div>
                        <div nz-form-control nz-col [nzSm]="20">
                            <nz-input [nzId]="'label-focus'"></nz-input>
                        </div>
                    </div>
                    <div nz-form-item nz-row>
                        <div nz-form-label nz-col [nzSm]="4">
                            <label nz-form-item-required>Required</label>
                        </div>
                        <div nz-form-control nz-col [nzSm]="20">
                            <nz-input></nz-input>
                        </div>
                    </div>
                    <div nz-form-item nz-row>
                        <div nz-form-label nz-col [nzSm]="4">
                            <label>With Help</label>
                        </div>
                        <div nz-form-control nz-col [nzSm]="20">
                            <nz-input></nz-input>
                            <div nz-form-explain>longgggggggggggggggggggggggggggggggggg</div>
                        </div>
                    </div>
                    <div nz-form-item nz-row>
                        <div nz-form-label nz-col [nzSm]="4">
                            <label>Placeholder</label>
                        </div>
                        <div nz-form-control nz-col [nzSm]="20">
                            <nz-input [nzPlaceHolder]="'placeholder'"></nz-input>
                        </div>
                    </div>
                    <div nz-form-item nz-row>
                        <div nz-form-label nz-col [nzSm]="4">
                            <label>Disabled</label>
                        </div>
                        <div nz-form-control nz-col [nzSm]="20">
                            <nz-input [nzDisabled]="true"></nz-input>
                        </div>
                    </div>
                    <div nz-form-item nz-row>
                        <div nz-form-label nz-col [nzSm]="4">
                            <label>Textarea</label>
                        </div>
                        <div nz-form-control nz-col [nzSm]="20">
                            <nz-input [nzType]="'textarea'"></nz-input>
                        </div>
                    </div>
                    <div nz-form-item nz-row>
                        <div nz-form-label nz-col [nzSm]="4">
                            <label>Checkboxes and radios</label>
                        </div>
                        <div nz-form-control nz-col [nzSm]="20">
                            <label nz-checkbox>
                                <span>Checkbox</span>
                            </label>
                            <nz-radio-group>
                                <label nz-radio [nzValue]="'A'">
                                    <span>Radio A</span>
                                </label>
                                <label nz-radio [nzValue]="'B'">
                                    <span>Radio B</span>
                                </label>
                            </nz-radio-group>
                        </div>
                    </div>
                    <div nz-form-item nz-row>
                        <div nz-form-label nz-col [nzSm]="4">
                            <label>Horizontal Checkboxes and radios</label>
                        </div>
                        <div nz-form-control nz-col [nzSm]="20">
                            <div class="d-block">
                                <label nz-checkbox>
                                    <span>Checkbox</span>
                                </label>
                            </div>
                            <nz-radio-group>
                                <label nz-radio [nzValue]="'A'" class="d-block">
                                    <span>Radio A</span>
                                </label>
                                <label nz-radio [nzValue]="'B'" class="d-block">
                                    <span>Radio B</span>
                                </label>
                            </nz-radio-group>
                        </div>
                    </div>
                    <div nz-form-item nz-row>
                        <div nz-form-label nz-col [nzSm]="4">
                            <label>Select</label>
                        </div>
                        <div nz-form-control nz-col [nzSm]="20">
                            <nz-select [(ngModel)]="selectValue" name="selectValue" nzAllowClear>
                                <nz-option
                                    *ngFor="let option of options"
                                    [nzLabel]="option.label"
                                    [nzValue]="option"
                                    [nzDisabled]="option.disabled">
                                    </nz-option>
                            </nz-select>
                        </div>
                    </div>
                    <div nz-form-item nz-row>
                        <div nz-form-label nz-col [nzSm]="4">
                            <label>Select[multiple]</label>
                        </div>
                        <div nz-form-control nz-col [nzSm]="20">
                            <nz-select [nzMode]="'multiple'" nzAllowClear>
                                <nz-option
                                    *ngFor="let option of options"
                                    [nzLabel]="option.label"
                                    [nzValue]="option">
                                    </nz-option>
                            </nz-select>
                        </div>
                    </div>
                    <div nz-form-item nz-row>
                        <div nz-form-label nz-col [nzSm]="4">
                            <label>cascader</label>
                        </div>
                        <div nz-form-control nz-col [nzSm]="20">
                            <nz-cascader
                                [(ngModel)]="cityValue" name="city"
                                [nzExpandTrigger]="'hover'"
                                [nzOptions]="cities"
                                (ngModelChange)="changeCity($event)"
                                (nzChange)="changeCity($event)"></nz-cascader>
                        </div>
                    </div>
                    <div nz-form-item nz-row>
                        <div nz-form-label nz-col [nzSm]="4">
                            <label>DatePicker</label>
                        </div>
                        <div nz-form-control nz-col [nzSm]="20">
                            <nz-datepicker></nz-datepicker>
                        </div>
                    </div>
                    <div nz-form-item nz-row>
                        <div nz-form-label nz-col [nzSm]="4">
                            <label>TimePicker</label>
                        </div>
                        <div nz-form-control nz-col [nzSm]="20">
                            <nz-timepicker></nz-timepicker>
                        </div>
                    </div>
                    <div nz-form-item nz-row>
                        <div nz-form-label nz-col [nzSm]="4">
                            <label>InputNumber</label>
                        </div>
                        <div nz-form-control nz-col [nzSm]="20">
                            <nz-input-number [nzMax]="10" [nzMin]="1"></nz-input-number>
                        </div>
                    </div>
                    <div nz-form-item nz-row>
                        <div nz-form-label nz-col [nzSm]="4">
                            <label>Switch</label>
                        </div>
                        <div nz-form-control nz-col [nzSm]="20">
                            <nz-switch [nzSize]="'large'" class="mr-sm"></nz-switch>
                            <nz-switch class="mr-sm"></nz-switch>
                            <nz-switch [nzSize]="'small'"></nz-switch>
                        </div>
                    </div>
                    <div nz-form-item nz-row>
                        <div nz-form-label nz-col [nzSm]="4">
                            <label>Slider</label>
                        </div>
                        <div nz-form-control nz-col [nzSm]="8">
                            <nz-slider [nzMarks]="marks"></nz-slider>
                        </div>
                    </div>
                    <div nz-form-item nz-row>
                        <div nz-form-label nz-col [nzSm]="4">
                            <label>Rate</label>
                        </div>
                        <div nz-form-control nz-col [nzSm]="20">
                            <nz-rate [(ngModel)]="rate" name="rate" nzAllowHalf></nz-rate>
                            <span class="ant-rate-text">{{rate}} 星</span>
                        </div>
                    </div>
                    <div nz-form-item nz-row>
                        <div nz-form-label nz-col [nzSm]="4">
                            <label>Tag</label>
                        </div>
                        <div nz-form-control nz-col [nzSm]="20">
                            <nz-tag [nzColor]="'pink'">pink</nz-tag>
                            <nz-tag [nzColor]="'red'">red</nz-tag>
                            <nz-tag [nzColor]="'orange'">orange</nz-tag>
                            <nz-tag [nzColor]="'green'">green</nz-tag>
                            <nz-tag [nzColor]="'cyan'" [nzClosable]="true">cyan</nz-tag>
                            <nz-tag [nzColor]="'blue'" [nzClosable]="true">blue</nz-tag>
                            <nz-tag [nzColor]="'purple'" [nzClosable]="true">purple</nz-tag>
                        </div>
                    </div>
                    <div nz-form-item nz-row>
                        <div nz-form-label nz-col [nzSm]="4">
                            <label>Categories Tag</label>
                        </div>
                        <div nz-form-control nz-col [nzSm]="20">
                            <nz-checkable-tag *ngFor="let tag of hotTags"
                                [nzChecked]="selectedTags.indexOf(tag) > -1"
                                (nzChange)="handleChange($event, tag)">
                                {{tag}}
                            </nz-checkable-tag>
                        </div>
                    </div>
                    <div nz-form-item nz-row>
                        <div nz-form-label nz-col [nzSm]="4">
                            <label>Control sizing</label>
                        </div>
                        <div nz-form-control nz-col [nzSm]="20">
                            <nz-input [nzPlaceHolder]="'large size'" [nzSize]="'large'"></nz-input>
                            <nz-input [nzPlaceHolder]="'default size'"></nz-input>
                            <nz-input [nzPlaceHolder]="'small size'" [nzSize]="'small'"></nz-input>
                        </div>
                    </div>
                    <div nz-form-item nz-row [nzGutter]="8">
                        <div nz-form-label nz-col [nzSm]="4">
                            <label>Column sizing</label>
                        </div>
                        <div nz-form-control nz-col [nzSm]="4">
                            <nz-input [nzPlaceHolder]="'nzSm=4'"></nz-input>
                        </div>
                        <div nz-form-control nz-col [nzSm]="6">
                            <nz-input [nzPlaceHolder]="'nzSm=6'"></nz-input>
                        </div>
                        <div nz-form-control nz-col [nzSm]="10">
                            <nz-input [nzPlaceHolder]="'nzSm=10'"></nz-input>
                        </div>
                    </div>
                    <div nz-form-item nz-row>
                        <div nz-form-label nz-col [nzSm]="4">
                            <label>radio button style</label>
                        </div>
                        <div nz-form-control nz-col [nzSm]="20">
                            <nz-radio-group>
                                <label nz-radio-button [nzValue]="'A'">
                                    <span>Hangzhou</span>
                                </label>
                                <label nz-radio-button [nzValue]="'B'">
                                    <span>Shanghai</span>
                                </label>
                                <label nz-radio-button [nzValue]="'C'">
                                    <span>Beijing</span>
                                </label>
                                <label nz-radio-button [nzValue]="'D'">
                                    <span>Chengdu</span>
                                </label>
                            </nz-radio-group>
                            <div class="mt-sm">
                                <nz-radio-group>
                                    <label nz-radio-button [nzValue]="'A'">
                                        <span>Hangzhou</span>
                                    </label>
                                    <label nz-radio-button [nzValue]="'B'" [nzDisabled]="true">
                                        <span>Shanghai</span>
                                    </label>
                                    <label nz-radio-button [nzValue]="'C'">
                                        <span>Beijing</span>
                                    </label>
                                    <label nz-radio-button [nzValue]="'D'">
                                        <span>Chengdu</span>
                                    </label>
                                </nz-radio-group>
                            </div>
                            <div class="mt-sm">
                                <nz-radio-group [nzSize]="'small'">
                                    <label nz-radio-button [nzValue]="'A'" [nzDisabled]="true">
                                        <span>Hangzhou</span>
                                    </label>
                                    <label nz-radio-button [nzValue]="'B'" [nzDisabled]="true">
                                        <span>Shanghai</span>
                                    </label>
                                    <label nz-radio-button [nzValue]="'C'" [nzDisabled]="true">
                                        <span>Beijing</span>
                                    </label>
                                    <label nz-radio-button [nzValue]="'D'" [nzDisabled]="true">
                                        <span>Chengdu</span>
                                    </label>
                                </nz-radio-group>
                            </div>
                        </div>
                    </div>
                    <div nz-form-item nz-row>
                        <div nz-form-label nz-col [nzSm]="4">
                            <label>Success</label>
                        </div>
                        <div nz-form-control nz-col [nzSm]="20" [nzValidateStatus]="'success'" nzHasFeedback>
                            <nz-input></nz-input>
                        </div>
                    </div>
                    <div nz-form-item nz-row>
                        <div nz-form-label nz-col [nzSm]="4">
                            <label>Fail</label>
                        </div>
                        <div nz-form-control nz-col [nzSm]="20" [nzValidateStatus]="'error'" nzHasFeedback>
                            <nz-input></nz-input>
                            <div nz-form-explain>Should be combination of numbers & alphabets</div>
                        </div>
                    </div>
                    <div nz-form-item nz-row>
                        <div nz-form-label nz-col [nzSm]="4">
                            <label>Warning</label>
                        </div>
                        <div nz-form-control nz-col [nzSm]="20" [nzValidateStatus]="'warning'" nzHasFeedback>
                            <nz-input></nz-input>
                        </div>
                    </div>
                    <div nz-form-item nz-row>
                        <div nz-form-label nz-col [nzSm]="4">
                            <label>Validating</label>
                        </div>
                        <div nz-form-control nz-col [nzSm]="20" [nzValidateStatus]="'validating'" nzHasFeedback>
                            <nz-input></nz-input>
                            <div nz-form-explain>I'm the content is being validating</div>
                        </div>
                    </div>
                </form>
            </ng-template>
        </nz-card>
    </div>
</div>
